<!DOCTYPE html>
<html class="js"><head>
<title>HTML5在线</title>
<meta name="keywords" content="HTML5在线">
<meta name="description" content="HTML5在线">
<meta name="Author" content="HTML5在线">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="HTML5%E5%9C%A8%E7%BA%BF_files/style.css" type="text/css" rel="stylesheet">
<script src="HTML5%E5%9C%A8%E7%BA%BF_files/jquery.js" type="text/javascript"></script>
<script src="HTML5%E5%9C%A8%E7%BA%BF_files/comm.js" type="text/javascript"></script><script src="HTML5%E5%9C%A8%E7%BA%BF_files/function.js" type="text/javascript"></script><script src="HTML5%E5%9C%A8%E7%BA%BF_files/dialog.js" type="text/javascript"></script><script src="HTML5%E5%9C%A8%E7%BA%BF_files/popup.htm" type="text/javascript"></script><script src="HTML5%E5%9C%A8%E7%BA%BF_files/PIE.htm" type="text/javascript"></script><script src="HTML5%E5%9C%A8%E7%BA%BF_files/lang.js" type="text/javascript"></script><script src="HTML5%E5%9C%A8%E7%BA%BF_files/responsive-nav.js" type="text/javascript"></script>
<script src="HTML5%E5%9C%A8%E7%BA%BF_files/script.js" type="text/javascript"></script>
<link rel="stylesheet" href="HTML5%E5%9C%A8%E7%BA%BF_files/responsive-nav.css" type="text/css">
<link rel="stylesheet" href="HTML5%E5%9C%A8%E7%BA%BF_files/iconfont.css" type="text/css">
<script src="HTML5%E5%9C%A8%E7%BA%BF_files/wow.js" type="text/javascript"></script>
<link rel="stylesheet" href="HTML5%E5%9C%A8%E7%BA%BF_files/swiper.css" type="text/css">
<script src="HTML5%E5%9C%A8%E7%BA%BF_files/swiper.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width,initial-scale=1"></head>
<body>
<div class="page_style lanmupage page_l61">
<div class="top_box">
 <div class="top_box_inner">
   <div class="topcontent"></div><div class="clear"></div>
   <div class="logo"><a href="http://html5ol.com/"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/logo.png" border="0"></a></div>
   <div aria-hidden="false" style="transition: min-height 0ms ease 0s; position: static;" class="menu_box nav-collapse nav-collapse-0 closed" id="Menu"><ul>
<li class="menu_style_homepage menu_current" id="MenuItem61" name="MenuItem"><a href="http://html5ol.com/" class="menu">首页</a></li>
<li class="menu_style" id="MenuItem62" name="MenuItem"><a href="#" class="menu">教程</a>
</li><li class="menu_style" id="MenuItem67" name="MenuItem"><a href="#" class="menu">框架</a></li>
<li class="menu_style" id="MenuItem84" name="MenuItem"><a href="#" class="menu">实例</a></li>
<li class="menu_style" id="MenuItem83" name="MenuItem"><a href="#" class="menu">资讯</a></li>
<li class="menu_style" id="MenuItem85" name="MenuItem"><a href="#" class="menu">笔记</a></li>
</ul></div><a aria-hidden="true" class="nav-toggle" href="#"><i class="iconfont">󰀥</i></a>
 </div>
</div>
<script type="text/javascript">var IsPageHome="1";var Lanmu_Id="61";var Sublanmu_Id="0";ShowSubMenu(Lanmu_Id);</script><link rel="stylesheet" type="text/css" href="HTML5%E5%9C%A8%E7%BA%BF_files/dropmenu.css">
<div class="banner"><script src="HTML5%E5%9C%A8%E7%BA%BF_files/slide_12.js" type="text/javascript"></script><div style="height: 483px; width: 1519px;" id="js_slide_focus_12" class="slide_focus focus_style3"><a style="display: none;" class="prev"></a><a style="display: none;" class="next"></a><div class="titbar"><em></em><span></span></div><div style="margin-left: -13px;" class="panel"><span style="display: none;"><em>0</em></span><span class="current"><em>1</em></span><span><em>2</em></span><span style="display: none;"><em>3</em></span></div><ul style="height: 483px; width: 6076px; margin-left: 0px;" class="inner"><li style="height: 483px; width: 1519px; display: none;"><a href="javascript:void(0)" target="_self" title=""><img style="height: 483px; width: 1519px;" src="HTML5%E5%9C%A8%E7%BA%BF_files/banner-2.jpg"><em></em></a></li><li class="current" style="height: 483px; width: 1519px;"><a href="javascript:void(0)" target="_self" title=""><img style="height: 483px; width: 1519px;" src="HTML5%E5%9C%A8%E7%BA%BF_files/banner-1.jpg"><em></em></a></li><li style="height: 483px; width: 1519px; display: none;"><a href="javascript:void(0)" target="_self" title=""><img style="height: 483px; width: 1519px;" src="HTML5%E5%9C%A8%E7%BA%BF_files/banner-2.jpg"><em></em></a></li><li style="height: 483px; width: 1519px; display: none;"><a href="javascript:void(0)" target="_self" title=""><img style="height: 483px; width: 1519px;" src="HTML5%E5%9C%A8%E7%BA%BF_files/banner-1.jpg"><em></em></a></li></ul></div></div>
<div class="main_box main_box_style">
 <div class="main_box_inner">
 

<div id="module_197" class="module_box module_197">
 <div style="visibility: visible; animation-delay: 0.2s; animation-name: fadeInDown;" data-wow-delay="0.2s" class="module_box_inner module_box_inner197 animated fadeInDown">
   <div id="module_content_197" class="module_content module_content_introduct">
<div class="qhd-content">
	<div class="typo">
		<a class="typo_img" href="#" target="_blank"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/1602296316.png" style="width:300px;height:337px;"></a> 
		<div class="typo_text">
			<p>
				<span style="font-size:24px; font-weight:bold"><span style="color:#ff0000;">HTML5 WEB前端开发</span></span> 
			</p>
			<p>
				
万维网的核心语言、超文本标记语言（HTML）的第五次重大修改。HTML5已经于2014年10月正式定稿。目前，大部分现代浏览器已经具备了某些
HTML5支持。HTML5是web时代最前沿的技术，它特有canvas标签和多种选择的游戏开发引擎，让游戏开发更便捷。如果说苹果重新发明了手机，
那么HTML5则重新定义了网络。它是链接手机、平板电脑、PC以及其他移动终端的桥梁，可以更丰富地展现页面，让视频、音频、游戏以及其他元素构成一场
华丽的代码盛宴。
			</p>
			<p style="padding-top:25px;">
				<span style="line-height:1.8;">HTML5是WEB的未来，不仅在电脑端，而且在移动端也一定会得到广泛的应
用。 据统计2013年全球将有10亿手机浏览器支持HTML5，同时HTML 
Web开发者数量将达到200万。毫无疑问，HTML5将成为未来5-10年内，移动互联网领域的主宰者。 
据IDC的调查报告统计，截至2012年5月，有79%的移动开发商已经决定要在其应有程序中整合HTML5技术。 
WEB技术发展越来越迅速，HTML5的到来更是把WEB技术推向了巅峰，目前HTML5技术已经日趋成熟，HTML5的未来十分光明，值得我们去学习。</span> 
			</p>
			<p style="text-align:right;">
				<a class="btn-medium btn-medium-main" href="#" target="_blank">了解详情&gt;&gt;</a> 
			</p>
		</div>
	</div>
</div>
   </div>
   <div class="module_footer"><span class="l"></span><span class="r"></span></div>
 </div>
</div>



<div id="module_196" class="module_box module_196">
 <div class="module_box_inner module_box_inner196">
   <div class="module_title"><span class="module_sign"><span class="title1">课程</span><div class="title2"><i></i><span>COURSES</span><i></i></div></span><span class="module_more"></span></div>
   <a class="cpzs_ckgd" href="#">全部 &gt;&gt;</a><div id="module_content_196" class="module_content">
<ul class="product_mkpic">

<li style="visibility: hidden; animation-delay: 0.2s; animation-name: none;" data-wow-delay="0.2s" class="left mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29152016.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品10">HTML基础</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.4s; animation-name: none;" data-wow-delay="0.4s" class="mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29151959.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品9"> HTML5&amp;CSS3 </a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.6s; animation-name: none;" data-wow-delay="0.6s" class="mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141820.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品8">JavaScript</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.8s; animation-name: none;" data-wow-delay="0.8s" class="mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141804.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品7">网页布局</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.9s; animation-name: none;" data-wow-delay="0.9s" class="right mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141748.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品6">DOM &amp; BOM</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.2s; animation-name: none;" data-wow-delay="0.2s" class="left mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141730.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品5">开发工具</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.4s; animation-name: none;" data-wow-delay="0.4s" class="mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141713.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品4">Photoshop</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.6s; animation-name: none;" data-wow-delay="0.6s" class="mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141659.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品3">响应式页面</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.8s; animation-name: none;" data-wow-delay="0.8s" class="mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141642.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品2"> Web App</a></span>
</li>

<li style="visibility: hidden; animation-delay: 0.9s; animation-name: none;" data-wow-delay="0.9s" class="right mk_cpzs">
<a href="#" target="_self"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/tpic_t_29141619.png" border="0"></a>
<span class="title">
<a href="#" target="_self" title="产品1">微信开发</a></span>
</li>

</ul>
</div>
   <div class="module_footer"><span class="l"></span><span class="r"></span></div>
 </div>
</div>

<div id="module_200" class="module_box module_200">
 <div style="visibility: hidden; animation-delay: 0.2s; animation-name: none;" data-wow-delay="0.2s" class="module_box_inner module_box_inner200">
   <div class="module_title"><span class="module_sign"><span class="title1">框架</span><div class="title2"><i></i><span>FRAMES</span><i></i></div></span><span class="module_more"></span></div>
   <a class="cpzs_ckgd" href="#">全部 &gt;&gt;</a> <div id="module_content_200" class="module_content module_content_introduct">
<div class="qhd-content">
	<div class="column">
		<div class="col-4-1">
			<p style="text-align:center;">
				<img src="HTML5%E5%9C%A8%E7%BA%BF_files/0921340818.png" alt=""> 
			</p>
			<p style="text-align:center;">
				<span style="font-size:18px;">jQuery</span> 
			</p>
			<p style="text-align:center;">
				一个兼容多浏览器的javascript库，兼容CSS3及各种浏览器。核心理念是write less,do more(写得更少,做得更多)。是目前最流行、使用最多的javascript库。<br>
			</p>
		</div>
		<div class="col-4-1">
			<p style="text-align:center;">
				<img src="HTML5%E5%9C%A8%E7%BA%BF_files/0922019368.png" alt=""> 
			</p>
			<p style="text-align:center;">
				<span style="font-size:18px;">Bootstrap</span> 
			</p>
			<p style="text-align:center;">
				来自Twitter，是目前很受欢迎的前端框架，基于HTML、CSS、JAVASCRIPT搭建，它简洁灵活，使得 Web 开发更加快捷。
			</p>
		</div>
		<div class="col-4-1">
			<p style="text-align:center;">
				<img src="HTML5%E5%9C%A8%E7%BA%BF_files/0922141375.png" alt=""> 
			</p>
			<p style="text-align:center;">
				<span style="font-size:18px;">AngularJS</span> 
			</p>
			<p style="text-align:center;">
				一款优秀的前端JS框架，被用于Google的多款产品当中。核心特性：MVVM、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。
			</p>
		</div>
		<div class="col-4-1 last">
			<p style="text-align:center;">
				<img src="HTML5%E5%9C%A8%E7%BA%BF_files/0922215175.png" alt=""> 
			</p>
			<p style="text-align:center;">
				<span style="font-size:18px;">Node.js</span> 
			</p>
			<p style="text-align:center;">
				基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用，速度快，性能好。
			</p>
		</div>
	</div>
</div>
   </div>
   <div class="module_footer"><span class="l"></span><span class="r"></span></div>
 </div>
</div>



<div id="module_198" class="module_box module_198">
 <div class="module_box_inner module_box_inner198">
   <div class="module_title"><span class="module_sign"><span class="title1">实例</span><div class="title2"><i></i><span>CASES</span><i></i></div></span><span class="module_more"></span></div>
   <a class="cpzs_ckgd" href="#">全部 &gt;&gt;</a><div id="module_content_198" class="module_content">
<ul class="tw_zs">
<li style="visibility: hidden; animation-delay: 0.2s; animation-name: none;" data-wow-delay="0.2s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164451.png">
    <span class="tw_tit">HTML5全屏幻灯片切换特效</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.4s; animation-name: none;" data-wow-delay="0.4s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164436.png">
    <span class="tw_tit">HTML5 SVG实现超酷打击乐器特效</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.6s; animation-name: none;" data-wow-delay="0.6s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164424.png">
    <span class="tw_tit">6款html5手机导航菜单特效</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.8s; animation-name: none;" data-wow-delay="0.8s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164411.png">
    <span class="tw_tit">jQuery可悬停控制图片轮播代码</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.2s; animation-name: none;" data-wow-delay="0.2s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164356.png">
    <span class="tw_tit">HTML5分段式SVG文字动画特效</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.4s; animation-name: none;" data-wow-delay="0.4s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164344.png">
    <span class="tw_tit">html5 svg图标手机菜单特效</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.6s; animation-name: none;" data-wow-delay="0.6s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164331.png">
    <span class="tw_tit">jQuery支持触摸屏3D旋转木马特效</span>
    <div class="fd-bg"></div>
  </a>
</li>

<li style="visibility: hidden; animation-delay: 0.8s; animation-name: none;" data-wow-delay="0.8s" class="mk_twzs">
  <a href="#">
    <img class="tw_pic" src="HTML5%E5%9C%A8%E7%BA%BF_files/t_15164313.png">
    <span class="tw_tit">html5点击左侧导航动画切换页面</span>
    <div class="fd-bg"></div>
  </a>
</li>

</ul></div>
   <div class="module_footer"><span class="l"></span><span class="r"></span></div>
 </div>
</div>

<div id="module_199" class="module_box module_199">
 <div style="visibility: hidden; animation-delay: 0.2s; animation-name: none;" data-wow-delay="0.2s" class="module_box_inner module_box_inner199">
   <div id="module_content_199" class="module_content module_content_introduct">

<dl class="sy_zxzx">
  <dd class="left">
    <div class="zx_title"><span>最新资讯</span><a href="#">更多</a></div>
    <div class="con"><ul class="wzlb_twbox">

  <li class="tw_dy">
     <a class="tw_img" href="http://html5ol.com/article/20160418/497.html"><img src="HTML5%E5%9C%A8%E7%BA%BF_files/18141530.jpg"></a>
     <div class="tw_con">
       <a href="#">HTML 5.1将于9月份正式发布 更新内容预览 </a>
       <span>HTML 5.1 来了。HTML 5诞生多年以来，受到多数主流浏览器的支持。接下来，这门互联网编程语言也将走上更加规范化的道路。</span>
     </div>
  </li>

  <li class="twlb_n">
    <span class="twlb_title"><a href="#">W3C正在开发HTML 5.1 代码托管在Github </a></span>
  </li>

  <li class="twlb_n">
    <span class="twlb_title"><a href="#">HTML5取代原生APP：Google的智，腾讯的谋？ </a></span>
  </li>

  <li class="twlb_n">
    <span class="twlb_title"><a href="#">新菜鸟到大神的上位历程，即学即用走向人生巅峰 </a></span>
  </li>

  <li class="twlb_n">
    <span class="twlb_title"><a href="#">12个超棒的Web开发工作站 </a></span>
  </li>

</ul></div>
  </dd>
  <dd class="right">
    <div class="pptyg"><span>笔记</span></div>
    <div class="pptyg_box">
       <a href="#">
         <img src="HTML5%E5%9C%A8%E7%BA%BF_files/tyg.jpg">
         <div class="yc_box">
           <span class="yc_title">阿里前端笔试总结</span>
           <span class="yc_con">几天前，去参加了阿里游戏的前端实习生笔试。因为基础不太扎实加上第一次没有经验...</span>
           <span class="yc_cksq">查看详情</span>
         </div>
         <span class="xs_title">前端笔记</span>
         <div class="yc_bg"></div>
       </a>
    </div>
  </dd>
</dl>


   </div>
   <div class="module_footer"><span class="l"></span><span class="r"></span></div>
 </div>
</div>
 </div>
 <div class="clear main_box_inner_bottom"></div>
</div><div class="bottom_box"><ul class="qhd-content-box">
	<li class="qhd-left">
		<p>
			<span>首页</span> | <span>教程</span> | <span>框架</span> | <span>实例</span> | <span>笔记</span>  
		</p>
		
	
	</li>
	<li class="qhd-right">
		<p style="text-align:center;">
			
		</p>
	</li>
</ul></div><div style="padding:5px" align="center">Copyright © 2016 html5ol.com All Rights Reserved  </div></div><a class="gotoptop_icon" id="gotoptop_icon" href="#" title="返回顶部"></a></body></html>